<template>

  <!--非分页的方式，一旦很大会卡-->
  <div>
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="pdfPath"
      :page="i"
    ></pdf>

  </div>

</template>

<script>

  import pdf from 'vue-pdf'


  export default {
    name: "PdfView",
    components: {
      pdf
    },
    data(){
      return {
        // pdf的访问地址
        pdfPath: this.$route.query.pdfSrc,
        numPages: 1,
      }
    },
    methods:{
      /**
       * 获取PDF的页数
       */
      getPageNum () {
        let loadingTask = pdf.createLoadingTask(this.pdfPath)
        loadingTask.promise.then(pdf => {
          this.numPages = pdf.numPages
        }).catch(err => {
          console.error('pdf加载失败', err);
        })
      }
    },
    mounted() {
      this.getPageNum()
    }
  }
</script>

<style>
  .pdf_wrap{
    height: 100%;
    padding-bottom: 1.4rem;
    background-color: #fff;
  }
</style>
<style  scoped>
  .pdf_wrap .btnCont {
    position: fixed;
    bottom: 0rem;
    left: 0;
    background-color: #fff;
    padding: 0.1rem 0 .40rem 0;
    width: 100%;
    border: 0;
    text-align: center;

  }
  .pdf_wrap .btnCont .savebtn{
    color: #fff;
    display: inline-block;
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 0.4rem;
    width: 6.9rem;
    margin: auto;
    font-size: 0.28rem;
    background-color: #ff0b95;
  }
</style>
